<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            width: 250px;
            height: 250px;
            display: flex;
            border: 1px solid pink;
            margin: 100px auto;
        }
        
        .left {
            margin: 0;
            padding: 0;
        }
        
        .left>li {
            width: 50px;
            height: 39.7px;
            border: 1px solid pink;
            list-style: none;
        }
        
        .left li>a {
            text-decoration: none;
            line-height: 35px;
        }
        
        .content {
            display: flex;
        }
        
        .content div {
            display: none;
        }
        
        .content .h {
            display: block;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        // 核心原理：鼠标经过左盒子某个li，就让内容盒子相对应图片显示，其余图片隐藏
        // 需要得到当前li的索引号，可以显示对应索引号的图片
        // jQuery得到当前元素索引号$(this).index()
        // 中间对应的图片，可以通过eq(index)方法去选择
        // 显示元素show() 隐藏元素hide()
        $(function() {
            // 1.鼠标经过左侧li
            $(".left li").mouseover(function() {
                var index = $(this).index();
                console.log(index);
                // 让右侧盒子相应的索引号图片显示出来
                $(".content div").eq(index).show();
                // 让其余的图片隐藏起来 兄弟盒子隐藏
                $(".content div").eq(index).siblings().hide();

            });
        })
    </script>

</head>

<body>
    <div class="wrap">
        <ul class="left">
            <li><a href="#">女鞋</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">牛仔裤</a></li>
        </ul>
        <div class="content">
            <div class="h">
                <a href="#"><img src="./img/x.jpg" width="200" height="250"></a>
            </div>
            <div>
                <a href="#"><img src="./img/m.jpg" width="200" height="250"></a>
            </div>
            <div>
                <a href="#"><img src="./img/y.jpeg" width="200" height="250"></a>
            </div>
            <div>
                <a href="#"><img src="./img/n.jpg" width="200" height="250"></a>
            </div>
            <div>
                <a href="#"><img src="./img/q.jpg" width="200" height="250"></a>
            </div>
            <div>
                <a href="#"><img src="./img/k.jpg" width="200" height="250"></a>
            </div>
        </div>
    </div>
</body>

</html>